
// 实现tab切换
$all('nav span').forEach((span, index) => {
  span.addEventListener('click', e => {
    initTab(index)
  })
})

initTab(1)

function initTab(index) {
  $('.active')?.classList.remove('active')
  $all('nav span')[index].classList.add('active')
  $('.show')?.classList.remove('show')
  $all('.content')[index].classList.add('show')
}

// 热歌榜 
async function initHotList() {
  try {
    const data = await request({
      url: 'http://zyxcl.xyz/music/api/playlist/detail?id=3778678'
    })
    // 根据接口渲染数据
    $('.hot-bg span').innerHTML = '更新日期：' + new Date(data.playlist.updateTime).toLocaleDateString()
    $('.hot-list').innerHTML = data.playlist.tracks.map((item, index) => {
      const ar = item.ar.map(v => v.name).join('/')
      return `
        <li data-id="${item.id}">
          <b class="${index < 3 ? 'red' : ''}">${addZero(index + 1)}</b>
          <div class="song-info">
            <div class="song-name">${item.name}</div>
            <p>${ar} - ${item.al.name}</p>
          </div>
          <span class="iconfont icon-bofang2"></span>
        </li>
      `
    }).join('')
    // 绑定事件
    $all('.hot-list li').forEach(li => {
      li.addEventListener('click', e => {
        const id = li.getAttribute('data-id')
        location.href = `./play.html?id=${id}`
      })
    })
  } catch(e) {
    console.log('请求失败:', e)
  }
}

initHotList()